<template>
  <div>
    <!-- <van-loading /> <van-loading type="spinner" /> -->
    <TopNav></TopNav>
    <div class="typess"></div>
    <div class="types">
      <Typesitem v-for="item in types" :key="item.ico" :ico="item.ico" :txt="item.txt"></Typesitem>
    </div>
    <TitleBar></TitleBar>
    <SellerListItem :info="ListItem"></SellerListItem>
    <goTop></goTop>
  </div>
</template> 
<script>
import Vue from "vue"
import TopNav from "../../components/Top/topnav";
import Typesitem from "../../components/type-item/type-item";
import TitleBar from "../../components/title-bar/title-bar";
import SellerListItem from "../../components/seller-list-item/seller-list-item";
import axios from "axios"
import { List } from 'vant';
import goTop from "../../components/goTop"
import myPosition from '../../utils/myPosition'
export default {
  data() {
    return {
      ListItem:[],
      types: [
        {
          ico: require("@/components/type-item/types/types (7).png"),
          txt: "美食",
        },
        {
          ico: require("@/components/type-item/types/types (0).png"),
          txt: "美团超市",
        },
        {
          ico: require("@/components/type-item/types/types (1).png"),
          txt: "生鲜果蔬",
        },
        {
          ico: require("@/components/type-item/types/types (5).png"),
          txt: "甜点饮品",
        },
        {
          ico: require("@/components/type-item/types/types (4).png"),
          txt: "正餐优选",
        },
        {
          ico: require("@/components/type-item/types/types (2).png"),
          txt: "美团专送",
        },
        {
          ico: require("@/components/type-item/types/types (3).png"),
          txt: "能量西餐",
        },
        {
          ico: require("@/components/type-item/types/types (6).png"),
          txt: "精品小吃",
        },
      ],
    };
  },
  methods: {},
  components: {
    TopNav,
    Typesitem,
    TitleBar,
    SellerListItem,
    goTop
  },
  created() {},
  async mounted() {
    let url = "/mock/index-list.json";
    let data = await axios.get(url);
    this.ListItem = data.data.data.poilist;
    this.$store.dispatch('Seller/sellerlist',this.ListItem)

    // 调用获取位置数据的方法
    myPosition.getLocation( res =>{
      this.$store.dispatch( 'search/myPosition' , res.formattedAddress )
    })
  },
};
</script>

<style scoped lang="scss">
.typess {
  height: 50px;
  width: 100%;
  overflow: hidden;
}
.types:after {
  content: "";
  height: 0;
  overflow: hidden;
  visibility: hidden;
  clear: both;
  display: block;
}
</style>
